<!DOCTYPE html>
<html lang="cn">
<head>
<title>代理演示</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="full-screen" content="yes" />
<meta name="browsermode" content="application" />
<meta name="x5-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="x5-page-mode" content="app" />
<meta name="viewport"
	content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
</head>
<body>
	<div id="app" class="container-fluid">
          testa：<input type="text" id="testa"  ><br/>
          testa：<input type="text" id="testb"   >
          <br/>
          <code id="code"></code>
	</div>
	
	
	<script >
	    //被代理的对象
        const target ={
                 testa:'testa'
                ,testb:'testb'
        }
        //代理处理方法
        const  handler = {
                get: function(target, key) {
                    console.log('getting '+key);
                    const v=target[key];
                    return v; 
                },
                set: function(target, key, value) {
                    console.log('setting '+key);
                    if(target[key]!=value){
                        target[key] = value;
                        document.getElementById(key).value=value;
                        //打印结果
                        document.getElementById("code").innerHTML=JSON.stringify(target);
                    }
                }
        }
        //代理类
        const proxy = new Proxy(target, handler);
        
        
        //初始化绑定值
        function init(){
	        for(let key in target){
	            const dom=document.getElementById(key);
	            //初始化值
	            dom.value=target[key];
	            //绑定事件
	            dom.addEventListener('change',function(e){
	                const who=e.target;
	                proxy[who.id]=who.value;
	            });
	        }
        }
        
        init();
        
       
        

    </script>
	
</body>
</html>
